<!DOCTYPE html>
<!--
Author: zouy
Unit: D9lab
Date: 2017-12-15 10:27 
-->
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>演示</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <style>
        .divCss{
            width: 300px;
            height: 200px;
            border: 1px solid red;
            padding: 20px;
        }
        #divId{
            width: 200px;
            height: 100px;
            border: 1px solid greenyellow;
        }
    </style>
</head>
<body style="padding-bottom: 20px;">
<div class="container" style="margin-top: 20px;">
    <div style="width: 300px;height: 200px;background-color: blue;" class="center-block">
        <div style="width: 100px;height: 100px;background-color: green;"></div>
        <div style="width: 110px;height: 110px;background-color: red;"></div>
    </div>
    <hr>
    <div style="width: 300px;height: 200px;background-color: blue;" class="center-block">
        <div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
        <div style="width: 110px;height: 110px;background-color: red;"></div>
    </div>
    <hr>
    <div style="width: 300px;height: 200px;background-color: blue;" class="center-block">
        <div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
        <div style="width: 110px;height: 110px;background-color: red;float: right;"></div>
    </div>
    <hr>
    <div style="width: 300px;height: 200px;background-color: blue;" class="center-block">
        <div style="width: 100px;height: 100px;background-color: green;float: left;"></div>
        <div style="width: 110px;height: 110px;background-color: red;float: left;margin-left: 10px;margin-top: 10px;"></div>
    </div>
    <hr>
    <div class="divCss center-block">
        <div id="divId">
        </div>
    </div>
    <hr>
    <form class="form-horizontal" role="form">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" placeholder="请输入用户名"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
                <input type="password" class="form-control" placeholder="请输入密码"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">性别</label>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="sexRadio" value="man" checked> 男
                </label>
                <label class="radio-inline">
                    <input type="radio" name="sexRadio" value="woman"> 女
                </label>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">爱好</label>
            <div class="col-sm-10">
                <select class="form-control">
                    <option>篮球</option>
                    <option>足球</option>
                    <option>游戏</option>
                    <option>跑步</option>
                    <option>学习</option>
                </select>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" class="btn btn-default">登录</button>
                <button type="button" class="btn btn-primary">登录</button>
                <button type="button" class="btn btn-info">登录</button>
                <button type="button" class="btn btn-danger">登录</button>
                <button type="button" class="btn btn-warning">登录</button>
            </div>
        </div>
    </form>
</div>
<script>
    var num = 1;
    var name = "zy";
    var user = {
        id: 1093,
        username: "zy",
        password: "123456",
        getId: function(){
            return "user的id是: "+this.id;
        }
    };
    var foo = function(callback){
        var i = 1;
        for(i;i<5;i++){
            //...
        }
        return callback(i);
    };
    var put = function(p){
        console.log("i的值是: "+p);
    };
    foo(put);
    console.log(user.getId());
    var div = document.getElementById("divId");
    console.log(div);
    div.onclick = function () {
      if(div.style.backgroundColor === "red"){
          div.style.backgroundColor = "green";
      }else {
          div.style.backgroundColor = "red";
      }
    };
    var Ajax={
        get: function(url, fn) {
            var obj = new XMLHttpRequest();  // XMLHttpRequest对象用于在后台与服务器交换数据
            obj.open('GET', url, true);
            obj.onreadystatechange = function() {
                if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) { // readyState == 4说明请求已完成
                    fn.call(this, obj.responseText);  //从服务器获得数据
                }
            };
            obj.send();
        },
        post: function (url, data, fn) {         // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
            var obj = new XMLHttpRequest();
            obj.open("POST", url, true);
            obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  // 添加http头，发送信息至服务器时内容编码类型
            obj.onreadystatechange = function() {
                if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                    fn.call(this, obj.responseText);
                }
            };
            obj.send(data);
        }
    };
    var f = {
        v: 1,
        m1: function(){
            this.v += 1;
            return this;
        },
        m2: function(){
            this.v += 2;
            return this;
        },
        m3: function(){
            this.v += 3;
            return this;
        }
    };
    console.log(f.m1().m2().m3());
</script>
<script>
    angular.module("m",[])
        .controller("c",function ($scope,myFactory) {
            $scope.entity = myFactory.getUser();
            console.log($scope.entity);
            console.log($scope.entity.getValue("username"));
        })
        .factory("myFactory",function () {//.service .provider
            return {
                getUser: function () {
                    var user = {
                        username: "zouy",
                        password: "123456",
                        age: 22,
                        getValue: function (v) {
                            return this[v];
                        }
                    };
                    return user;
                }
            }
        })
        .directive("myDirective",function () {
            return {
                restrict: 'AEC',//A:attribute E:element C:class
                replace: true,
                scope: {
                    entity: "=", title: "@", name: "@"
                },
                template: '<input class="" style="" type="text" ng-model="entity[name]"' +
                ' ng-click="click()" ng-focus="focus()" ng-blur="blur()" />',
                link: function (scope) {
                    scope.click = function () {
                        //...
                    };
                    scope.focus = function () {
                        //...
                    };
                    scope.blur = function () {
                        //...
                    };
                    //......
                }
            }
        })
</script>
<!--<div ng-app="m" ng-controller="c" style="margin-bottom: 20px;text-align: center;">
    <div my-directive name="username" title="用户名" entity="entity"></div>
    <div my-directive name="password" title="密码" entity="entity"></div>
    <div my-directive name="age" title="年龄" entity="entity"></div>
</div>-->
</body>
</html>